<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <link rel="stylesheet" href="../../dist/mapbox.css"/>
  <link rel="stylesheet" href="embed.css"/>
  <script src="../../dist/mapbox.js"></script>
  <script src="access_token.js"></script>
</head>
<body>
<div id='z'>
    <div id='zoom-bar' class='dragdealer'>
        <div id='handle' class="handle">0</div>
    </div>
</div>
<div id='pan' class='pan'>
    <div class='wrapper'>
        <a id='left' class='panner'>&larr;</a>
        <a id='right' class='panner'>&rarr;</a>
        <a id='down' class='panner'>&darr;</a>
        <a id='up' class='panner'>&uarr;</a>
    </div>
</div>
<div id='map'>
</div>
<!-- if you plan to use this example, download drag dealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script
    src='http://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<style>
    #z {
        top: 160px;
        left: 40px;
        position: absolute;
        z-index: 999;
    }

    #zoom-bar {
        width: 30px;
        position: relative;
        height: 200px;
        background: #FFF;
        border: 1px solid #BBB;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    .dragdealer .handle {
        position: absolute;
        cursor: pointer;
        width: 30px;
        height: 30px;
        background: #222;
        color: #fff;
        font-weight: bold;
        line-height: 30px;
        text-align: center;
    }

    #pan {
        position: absolute;
        top: 50px;
        left: 10px;
        z-index: 999;
    }

    .wrapper {
        position: relative;
    }

    #pan .wrapper .panner {
        background: #fff;
        top: 0;
        position: absolute;
        left: 0;
        padding: 5px;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 3px;
        text-align: center;
        -webkit-user-select: none;
    }

    #pan .panner#left {
        top: 35px;
    }

    #pan .panner#right {
        top: 35px;
        left: 60px;
    }

    #pan .panner#down {
        top: 70px;
        left: 30px;
    }

    #pan .panner#up {
        top: 0px;
        left: 30px;
    }
</style>
<script>
    var map = L.mapbox.map('map', 'examples.map-i875kd35');
    var zooms = 17;
    var handle = document.getElementById('handle');

    // Configure Dragdealer to update the map zoom
    var zoom_bar = new Dragdealer('zoom-bar', {
        steps: zooms,
        snap: true,
        horizontal: false,
        vertical: true,
        callback: function(x, y) {
            var z = y * (zooms - 1);
            map.setZoom(z);
            handle.innerHTML = z;
        }
    });

    // Round zoom so that numbers in the bar look presentable.
    map.on('zoomend', function() {
        var z = Math.round(map.getZoom());
        zoom_bar.setValue(0, z / 16);
        handle.innerHTML = z;
    });

    document.getElementById('left').onclick = function() {
        console.log("AS");
        map.panBy([-100, 0]);
    };

    document.getElementById('right').onclick = function() {
        map.panBy([100, 0]);
    };

    document.getElementById('down').onclick = function() {
        map.panBy([0, 100]);
    };

    document.getElementById('up').onclick = function() {
        map.panBy([0, -100]);
    };

    map.setView([34.660322, 132.506103], 9);

</script>
</body>
</html>
